{% block sw_product_modal_variant_generation %}
<sw-modal
    v-if="!showUploadModal"
    :title="$tc('sw-product.variations.configuratorModal.title')"
    class="sw-product-modal-variant-generation"
    @modal-close="$emit('modal-close')"
>

    {% block sw_product_modal_variant_generation_sidebar %}
    <div class="sw-product-modal-variant-generation__sidebar">
        {% block sw_product_modal_variant_generation_sidebar_tabs %}
        <sw-tabs
            is-vertical
            position-identifier="sw-product-modal-variant-generation"
        >
            {% block sw_product_modal_variant_generation_sidebar_tabs_items %}

            {% block sw_product_modal_variant_generation_sidebar_tabs_item_options %}
            <sw-tabs-item
                class="sw-variant-modal__option-selection"
                :active="activeTab == 'options'"
                @click="activeTab = 'options'"
            >
                {{ $tc('sw-product.variations.configuratorModal.selectOptions') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_product_modal_variant_generation_sidebar_tabs_item_prices %}
            <sw-tabs-item
                v-show="variantsNumber"
                class="sw-variant-modal__surcharge-configuration"
                :active="activeTab == 'prices'"
                @click="activeTab = 'prices'"
            >
                {{ $tc('sw-product.variations.configuratorModal.priceSurcharges') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_product_modal_variant_generation_sidebar_tabs_item_restrictions %}
            <sw-tabs-item
                v-show="variantsNumber"
                class="sw-variant-modal__restriction-configuration"
                :active="activeTab == 'restrictions'"
                @click="activeTab = 'restrictions'"
            >
                {{ $tc('sw-product.variations.configuratorModal.defineRestrictions') }}
            </sw-tabs-item>
            {% endblock %}

            {% endblock %}
        </sw-tabs>
        {% endblock %}

        {% block sw_product_modal_variant_generation_sidebar_descriptions %}
        {% block sw_product_modal_variant_generation_sidebar_descriptions_options %}
        <div v-if="activeTab == 'options'">
            <p>{{ $tc('sw-product.variations.configuratorModal.selectOptionsExplanation') }}</p>
            {% block sw_product_modal_variant_generation_sidebar_add_only_selected %}

            <mt-switch
                v-model="isAddOnly"
                :label="$tc('sw-product.variations.configuratorModal.addVariantsOnly')"
            />
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_product_modal_variant_generation_sidebar_descriptions_restrictions %}
        <p v-else-if="activeTab == 'restrictions'">
            {{ $tc('sw-product.variations.configuratorModal.selectRestrictionsExplanation') }}
        </p>
        {% endblock %}

        {% block sw_product_modal_variant_generation_sidebar_descriptions_prices %}
        <p v-else-if="activeTab == 'prices'">
            {{ $tc('sw-product.variations.configuratorModal.selectPricesExplanation') }}
        </p>
        {% endblock %}
        {% endblock %}

    </div>
    {% endblock %}

    {% block sw_product_modal_variant_generation_main %}
    <div class="sw-product-modal-variant-generation__main">
        {% block sw_product_modal_variant_generation_main_configurator_selection %}
        <sw-product-variants-configurator-selection
            v-show="activeTab == 'options'"
            :product="product"
            :options="product.configuratorSettings"
            :overlay="false"
            :collapsible="false"
            :is-add-only="isAddOnly"
            @variations-finish-generate="$emit('variations-finish-generate')"
            @option-select="calcVariantsNumber()"
        />
        {% endblock %}

        {% block sw_product_modal_variant_generation_main_configurator_prices %}
        <sw-product-variants-configurator-prices
            v-if="activeTab == 'prices'"
            :product="product"
            :selected-groups="selectedGroups"
        />
        {% endblock %}

        {% block sw_product_modal_variant_generation_main_configurator_restrictions %}
        <sw-product-variants-configurator-restrictions
            v-if="activeTab == 'restrictions'"
            :product="product"
            :selected-groups="selectedGroups"
        />
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_modal_variant_generation_footer %}
    <template #modal-footer>
        {% block sw_product_modal_variant_generation_footer_cancel %}
        <mt-button
            size="small"
            variant="secondary"
            @click="onModalCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}
        {% block sw_product_modal_variant_generation_footer_generate %}
        <mt-button
            class="sw-product-variant-generation__next-action"
            variant="primary"
            size="small"
            @click="showNextStep"
        >
            {{ $tc('sw-product.variations.nextModalButton') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

</sw-modal>

<sw-modal
    v-else
    :title="$tc('sw-product.variations.configuratorModal.title')"
    class="sw-product-modal-variant-generation sw-product-modal-variant-generation__upload_files"
    @modal-close="$emit('modal-close')"
>
    <div class="sw-product-modal-variant-generation__infoBox">
        {{ $tc('sw-product.variations.configuratorModal.uploadInfoBoxHeader') }}
        <div class="sw-product-modal-variant-generation__infoBoxContent">
            <span class="sw-product-modal-variant-generation__variant-amount">
                {{ $tc('sw-product.variations.configuratorModal.uploadInfoBoxCount', { count: variantGenerationQueue.createQueue.length }, variantGenerationQueue.createQueue.length) }}
            </span>
            {{ $tc('sw-product.variations.configuratorModal.uploadInfoBoxCreateLabel', { count: variantGenerationQueue.createQueue.length }, variantGenerationQueue.createQueue.length) }}

            <span class="sw-product-modal-variant-generation__variant-amount">
                {{ $tc('sw-product.variations.configuratorModal.uploadInfoBoxCount', { count: variantGenerationQueue.deleteQueue.length }, variantGenerationQueue.deleteQueue.length) }}
            </span>
            {{ $tc('sw-product.variations.configuratorModal.uploadInfoBoxDeleteLabel', { count: variantGenerationQueue.deleteQueue.length }, variantGenerationQueue.deleteQueue.length) }}
        </div>
    </div>

    <template v-if="variantGenerationQueue.createQueue.length > 0">
        <div class="sw-product-modal-variant-generation__upload-card">
            <div class="sw-product-modal-variant-generation__card-title">
                {{ $tc('sw-product.variations.configuratorModal.uploadCardDescription') }}
            </div>

            <div class="sw-product-modal-variant-generation__upload-all-container">

                <mt-switch
                    :label="$tc('sw-product.variations.configuratorModal.digitalVariantSwitch')"
                    @update:model-value="onChangeAllVariantValues"
                />
                <div class="sw-product-modal-variant-generation__upload-all">
                    <sw-upload-listener
                        upload-tag="upload_all"
                        auto-upload
                        @media-upload-finish="successfulUpload"
                    />
                    <sw-media-compact-upload-v2
                        v-if="productDownloadFolderId"
                        :button-label="$tc('sw-product.variations.configuratorModal.uploadAllButton')"
                        :remove-button-label="$tc('sw-product.variations.configuratorModal.removeAllButton')"
                        upload-tag="upload_all"
                        private-filesystem
                        :source-multiselect="downloadFilesForAllVariants.length > 0 ? downloadFilesForAllVariants : null"
                        allow-multi-select
                        add-files-on-multiselect
                        :target-folder-id="productDownloadFolderId"
                        file-accept="*/*"
                        @delete-item="(file) => removeFileForAllVariants(file)"
                    />
                </div>
            </div>

            <div class="sw-product-modal-variant-generation__toolbar">
                <sw-card-filter
                    :placeholder="$tc('sw-product.variations.configuratorModal.uploadCardSearchPlaceholder')"
                    @sw-card-filter-term-change="onTermChange"
                />
            </div>

            <sw-data-grid
                class="sw-product-modal-variant-generation__grid"
                :data-source="paginatedVariantArray"
                :show-selection="false"
                :show-header="false"
                :show-actions="false"
                :compact-mode="false"
                :plain-appearance="true"
                :columns="[
                    { property: 'options', label: 'Optionen' },
                ]"
            >
                <template #column-options="{ item }">
                    <div>
                        <template
                            v-for="(option, index) in item.options"
                            :key="index"
                        >
                            <span
                                v-if="option.entity"
                            >
                                {{ option.entity.group.translated?.name || option.entity.group.name }}:
                                {{ option.entity.translated?.name || option.entity.name }}
                                <template v-if="index != Object.keys(item.options).length - 1">|</template>
                            </span>
                        </template>
                    </div>

                    <div
                        :key="item.id"
                        class="sw-data-grid__item"
                    >

                        <mt-switch
                            label="Digital"
                            :model-value="item.productStates.includes('is-download')"
                            @update:model-value="(event) => onChangeVariantValue(event, item)"
                        />
                        <sw-upload-listener
                            :upload-tag="item.productNumber"
                            auto-upload
                            @media-upload-finish="(event) => successfulUpload(event, item)"
                        />
                        <sw-media-compact-upload-v2
                            v-if="productDownloadFolderId"
                            :upload-tag="item.productNumber"
                            :disabled="item.productStates.length === 0"
                            private-filesystem
                            allow-multi-select
                            add-files-on-multiselect
                            :source-multiselect="item.downloads.length > 0 ? item.downloads : null"
                            :target-folder-id="productDownloadFolderId"
                            file-accept="*/*"
                            @delete-item="(file) => removeFile(`${file.fileName}.${file.fileExtension}`, item)"
                        />
                    </div>
                </template>

                <template #pagination>
                    <sw-pagination
                        :page="page"
                        :limit="limit"
                        :total="total"
                        :total-visible="7"
                        @page-change="handlePageChange"
                    />
                </template>
            </sw-data-grid>
        </div>
    </template>

    <template #modal-footer>
        <mt-button
            size="small"
            variant="secondary"
            @click="showUploadModal = false"
        >
            {{ $tc('sw-product.variations.backVariationsButton') }}
        </mt-button>

        <mt-button
            :disabled="isGenerateButtonDisabled"
            class="sw-product-variant-generation__generate-action"
            :variant="buttonVariant"
            :is-loading="isLoading"
            size="small"
            @click="generateVariants()"
        >
            {{ buttonLabel }}
        </mt-button>
    </template>

    <template #modal-loader>
        <transition name="generate-variant-progress-bar-transition">
            <div
                v-if="isLoading"
                class="generate-variant-progress-bar__wrapper"
            >
                <mt-progress-bar
                    class="generate-variant-progress-bar"
                    :model-value="actualProgress"
                    :max-value="maxProgress"
                />

                <span class="generate-variant-progress-bar__description">
                    {{ actualProgress }} {{ $tc('sw-product.variations.progressTypeOf') }} {{ maxProgress }} {{ $tc('sw-product.variations.progressTypeVariation') }} {{ progressMessage }}
                </span>
            </div>
        </transition>
    </template>
</sw-modal>
{% endblock %}
